<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ChaosGenius Task Monitor</title>

    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://unpkg.com/simple-datatables@3.2.0/dist/style.css" rel="stylesheet" type="text/css">
</head>

<body class="bg-white">
    <div class="container mx-auto py-4">
        <h1 class="text-3xl">ChaosGenius Task Monitor</h1>

        <div class="flex flex-col py-4">
            <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                    <div class="shadow overflow-hidden border-b border-gray-200 bg-gray-100 sm:rounded-2xl">
                        <table class="min-w-full divide-y divide-gray-200" id="tasktable">
                            <thead class="bg-gray-900">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                        KPI Name (ID)
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                        Job/Task ID
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                        Analytics Type
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                        Analytics Subtask
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                        Status
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                        Timestamp
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for i, task in enumerate(tasks) %}
                                {% if i % 2 == 1 %}
                                <!-- Odd row -->
                                <tr class="bg-white">
                                    {% else %}
                                    <!-- Even row -->
                                <tr class="bg-gray-50">
                                    {% endif %}
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                        {{ task.kpi_name + " (" + str(task.kpi_id) + ")" }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ task.task_id }}

                                        <!-- TODO: place progress bar in a better place -->
                                        {% if False %}
                                        <div class="overflow-hidden h-2 my-2 text-xs flex rounded bg-yellow-200">
                                            <div style="width:{{ (task.completed_subtasks[0] / task.total_subtasks) * 100 }}%" {% if task.completed_subtasks[0] !=task.total_subtasks %} class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-yellow-500">
                                                {% else %}
                                                class="shadow-none flex flex-col text-center whitespace-nowrap
                                                text-white justify-center bg-green-500">
                                                {% endif %}
                                            </div>
                                        </div>
                                        {% endif %}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ task.analytics_type }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ task.checkpoint }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {% if task.status == "Success" %}
                                        <span class="text-green-500">
                                            {% elif task.status == "Failure" %}
                                            <span class="text-red-500">
                                                {% else %}
                                                <span>
                                                    {% endif %}
                                                    {{ task.status }}

                                                    {% if task.error %}
                                                    <button class="rounded-md underline hover:text-red-500" onclick="showerror({{i}})">
                                                        (Error)
                                                    </button>
                                                    {% endif %}
                                                </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ task.timestamp }}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="fixed z-10 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true" id="error-modal">
            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                <!--
              Background overlay, show/hide based on modal state.

              Entering: "ease-out duration-300"
                From: "opacity-0"
                To: "opacity-100"
              Leaving: "ease-in duration-200"
                From: "opacity-100"
                To: "opacity-0"
            -->
                <div class="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" aria-hidden="true"></div>

                <!--
              Modal panel, show/hide based on modal state.

              Entering: "ease-out duration-300"
                From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                To: "opacity-100 translate-y-0 sm:scale-100"
              Leaving: "ease-in duration-200"
                From: "opacity-100 translate-y-0 sm:scale-100"
                To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            -->
                <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-4 sm:mx-4 box-border sm:align-middle sm:w-full" style="max-width: calc(100vw - 2rem);">
                    <div class="bg-white px-4 pt-5 pb-3 sm:p-6 sm:pb-3">
                        <div class="sm:flex sm:items-start">
                            <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                                <!-- Heroicon name: outline/exclamation -->
                                <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                                </svg>
                            </div>
                            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left overflow-x-auto sm:flex-grow">
                                <div class="flex flex-row">
                                    <h3 style="flex-grow: 1;" class="self-center text-lg leading-6 font-medium text-gray-900" id="error-modal-title">
                                    </h3>
                                    <button onclick="closeerrormodal()">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                    </button>
                                </div>
                                <div class="mt-2">
                                    <p class="text-sm text-gray-500" id="error-modal-message">
                                        Traceback for the error:
                                    </p>
                                    <div style="text-align: left;" class="overflow-x-auto rounded-md font-light sm:text-left" id="error-modal-traceback"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 pb-4 sm:px-6 sm:flex sm:flex-row-reverse">
                        <a href="#" target="_blank" rel="noopener noreferrer" id="error-github-link">
                            <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                                Open Issue
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                </svg>
                            </button>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <h1 class="text-3xl pt-10 pb-4">ChaosGenius Service Status</h1>

        <div>
            {% if container_status is none %}
            Service status is currently only supported on docker-compose installations.
            {% else %}
            <ul role="list" class="mt-3 grid grid-cols-1 gap-5 sm:gap-6 sm:grid-cols-2 lg:grid-cols-4">
                {% for container, status in container_status.items() %}
                <li class="col-span-1 flex shadow-sm rounded-md">
                    {% if status %}
                    <div class="flex-shrink-0 flex items-center justify-center w-16 bg-green-500 text-white text-sm font-medium rounded-l-md">
                        Up
                    </div>
                    {% else %}
                    <div class="flex-shrink-0 flex items-center justify-center w-16 bg-pink-600 text-white text-sm font-medium rounded-l-md">
                        Down
                    </div>
                    {% endif %}
                    <div class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md truncate">
                        <div class="flex-1 px-4 py-2 text-sm truncate">
                            <p class="text-gray-900 font-medium hover:text-gray-600">{{ CONTAINERS[container] }} </p>
                            <p class="text-gray-500">{{ container }}</p>
                        </div>
                    </div>
                </li>
                {% endfor %}
            </ul>
            {% endif %}
        </div>

    </div>


    <style>
        .dataTable-table > thead > tr > th {
            vertical-align: middle;
        }
    </style>
    <script src="https://unpkg.com/simple-datatables@3.2.0/dist/umd/simple-datatables.js" type="text/javascript"></script>
    <script>
        const dataTable = new simpleDatatables.DataTable("#tasktable");
    </script>

    <script type="text/javascript">
        var taskErrorMapping = {
            {% for i, task in enumerate(tasks) %}
                {% if task.error %}
                {{i}}: {{ (list(task.error.split("\n", maxsplit = 1)) + [task.github_issue_link]) | tojson }},
                {% endif %}
            {% endfor %}
        };

        function showerror(id) {
            let error = taskErrorMapping[id];

            if (!error) {
                console.log("Could not find error for ", id);
                return;
            }

            let header = error[0];
            let traceback = error[1];
            let githubIssueLink = error[2];

            document.getElementById("error-modal").classList.remove("hidden");

            document.getElementById("error-modal-title").innerHTML = header;
            document.getElementById("error-modal-traceback").innerHTML = traceback;

            document.getElementById("error-github-link").href = githubIssueLink;
        }

        function closeerrormodal() {
            document.getElementById("error-modal").classList.add("hidden");
        }
    </script>
    <style type="text/css">
        #error-modal-traceback {
            max-height: calc(100vh - 18rem);
        }

        @media (min-width: 640px) {
            #error-modal-traceback {
                max-height: calc(100vh - 12rem);
            }
        }
    </style>
</body>

</html>
